<template>
    <div v-loading="pager.loading">
        <div class="grid gap-x-4 grid-cols-3 3xl:grid-cols-4 6xl:grid-cols-5">
            <div
                v-for="(item, index) in (pager.lists as KnowManageListResponse[])"
                :key="index"
                class="agent"
                @click="router.push('/agent/mcp/' + item.code)"
            >
                <div class="flex gap-4">
                    <photos width="64px" height="64px" radius="6px" :src="item.logo" />
                    <div class="h-[90px]">
                        <h2 class="title">{{ item.name }}</h2>
                        <div class="intro">{{ item.intro || '暂无介绍' }}</div>
                    </div>
                </div>
                <div class="flex items-center mb-2">
                    <span class="text-xs text-tx-placeholder">最近编辑 {{ item.update_time }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="flex items-center gap-1">
                            <photos
                                width="14px"
                                height="14px"
                                radius="50%"
                                :inline="true"
                                :src="item.user?.avatar"
                            />
                            <span class="text-xs text-tx-placeholder">
                                {{ item.user?.nickname }}
                            </span>
                        </div>
                        <div class="flex items-center gap-px text-tx-placeholder">
                            <icon name="el-icon-Lock" :size="12" />
                            <span class="ml-px text-xs">
                                {{ item.is_owner ? '私有' : '仅协作' }}
                            </span>
                        </div>
                    </div>
                    <el-dropdown @command="handleCommand">
                        <icon name="el-icon-MoreFilled" color="#999" />
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item :command="beforeHandleCommand('update', index)">
                                    <div class="flex items-center  py-[2px]">
                                        <icon name="el-icon-Edit"/>
                                        <span class="ml-1">编辑信息</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item :command="beforeHandleCommand('authority', index)">
                                    <div class="flex items-center  py-[2px]">
                                        <icon name="el-icon-Lock"/>
                                        <span class="ml-1">权限</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item :command="beforeHandleCommand('delete', index)" divided>
                                    <div class="flex items-center py-[2px]">
                                        <icon name="el-icon-Delete" />
                                        <span class="ml-1">删除</span>
                                    </div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>

        <div
            v-if="pager.lists.length === 0 && !pager.loading"
            class="pt-14 w-full h-full"
        >
            <el-empty v-if="owner === 'cooperate'" description="暂无协作的MCP" />
            <el-empty v-else description="暂无MCP，创建一个吧!" />
        </div>

        <div v-if="pager.lists.length >= pager.limit" class="flex justify-center my-4">
            <paging
                v-model="pager"
                layout="prev, pager, next"
                @change="queryLists"
            />
        </div>

        <popup-team-cfg
            v-if="teamPopup"
            type="mcp"
            :show="teamPopup"
            :code="teamCode"
            :power="teamPower"
            @close="teamPopup = false"
        />
    </div>
</template>

<script lang="ts" setup>
import mcpClientApi from '~/api/agent/mcp/client'
import PopupTeamCfg from '~/pages/agent/_components/popup-team-cfg.vue'

const emits = defineEmits(['complete'])
const props = defineProps({
    // 刷新列表
    refresh: {
        type: Boolean,
        default: false
    },
    // 关键词
    keyword: {
        type: String,
        default: ''
    },
    // 权限: [all=全部,private=私有,cooperate=协作]
    owner: {
        type: String,
        default: ''
    }
})

// 路由对象
const router = useRouter()

// 团队信息
const teamPopup = ref<boolean>(false)
const teamPower = ref<number>(0)
const teamCode = ref<string>('')

// 查询参数
const queryParams = reactive({
    owner: props.owner,
    keyword: props.keyword
})

// 分页查询
const { pager, queryLists, resetPaging } = usePaging({
    fetchFun: mcpClientApi.lists,
    params: queryParams
})

/**
 * 指令对象
 *
 * @param command
 * @param index
 * @author zero
 */
const beforeHandleCommand = (command: string, index: number) => {
    return {
        command,
        index
    }
}

/**
 * 指令操作
 *
 * @param d
 * @author zero
 */
const handleCommand = async (d: any) => {
    const command: string = d.command
    const index: number = d.index
    const code: string = pager.lists[index].code
    const power: number = pager.lists[index].power
    switch (command) {
        case 'authority':
            teamCode.value = code
            teamPower.value = power
            teamPopup.value = true
            break
        case 'update':
            await router.push('/agent/mcp/' + code)
            break
        case 'delete':
            feedback.confirm('您确定要删除吗?')
                .then(async () => {
                    await mcpClientApi.delete(code)
                    await resetPaging()
                    feedback.msgSuccess('删除成功')
                }).catch(() => {})
            break
    }
}

watch(
    () => props.refresh,
    async () => {
        emits('complete')
        queryParams.owner = props.owner
        queryParams.keyword = props.keyword
        await resetPaging()
    }, {
        immediate: true
    }
)

watch(
    () => props.owner,
    async () => {
        emits('complete')
        queryParams.owner = props.owner
        await resetPaging()
    }
)
</script>

<style lang="scss" scoped>
.agent {
    position: relative;
    width: 100%;
    padding: 20px 20px 16px;
    margin-bottom: 16px;
    overflow: hidden;
    cursor: pointer;
    background: var(--el-bg-color);
    border-radius: 8px;
    box-shadow: 0 6px 8px 0 rgb(28 31 35 / 6%);
    &:hover {
        box-shadow: 0 6px 8px 0 rgb(28 31 35 / 12%);
    }
    .title {
        height: 24px;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
    .intro {
        display: -webkit-box;
        width: 100%;
        height: 40px;
        margin-top: 6px;
        overflow: hidden;
        font-size: 13px;
        font-weight: 400;
        line-height: 20px;
        color: var(--el-text-color-secondary);
        -webkit-box-orient: vertical;
    }
    .divider {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0 6px;
        &::before {
            display: block;
            width: 3px;
            height: 3px;
            content: "";
            background-color: var(--el-text-color-secondary);
            border-radius: 50%;
        }
    }
}

:deep(.el-dropdown-menu__item) {
    margin: 5px;
    border-radius: 6px;
}
</style>
